<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式</title>

    <!--外联式引入-->
    <link rel="stylesheet" href="MyCss.css">
    <style>
        /*内嵌式
        外联式：单独写在一个.css文件中，
              行内式 内嵌式*/
        /*
        选择器，就是选中指定的标签
        标签选择器：选择器的名称就是标签的名称  会让选择器中的样式适用于页面所有对应的标签
        id选择器： id值一般是唯一的，不要数字开头   格式#id
        class选择器：class选择器名称可以无线重复   特点：.class值,一个标签可以使用多个类名，用空格隔开
        以上三个成为三大基础选择器
        样式也符合就近原则：谁理我最近我就优先使用谁  权重值越大 id的权重大于class的权重
          id选择器 > class选择器 > 标签选择器 > *通配选择器

          同权重下     内联式>外联式
          不同权重下   id选择器 > class选择器 > 标签选择器 > *通配选择器
         */
        p{
            color: red;
            font-size: 30px;
            background-color: #189f92;
            width: 200px;
            height: 100px;
        }
        .one{
            color: green;
            font-size: 30px;
border: 1px solid darkgrey;
            background-color:white;
            width: 230px;
            height: 100px;
        }
        #two{
            color:darkcyan;
            width: 200px;
            height: 100px;
            background-color:wheat;
          font-size: 22px;
            font-weight: lighter;
            border: 1px solid green;


        }
        .three{
            width: 200px;
            height: 60px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<p>这是一个p标签</p>
<!--行内式-->
<div style="border:1px solid red;width: 300px;height: 200px;color: #189f92;font-size: 20px">这是一个div标签</div>
<!--类选择器-->
<div class="one">类选择器</div>
<div id="two"><div class="three">hha</div></div>
</body>
</html>